<template>
  <view class="about-page">
    <!-- 应用/公司介绍 -->
    <view class="section">
      <image class="logo" src="" mode="aspectFit" />
      <text class="app-name">餐厅点餐应用</text>
      <text class="slogan">让点餐更简单，生活更美好！</text>
      <view class="description">
        <text>
          这里写一段关于应用或公司的详细介绍文字，可以包括创建背景、目标用户、核心价值、发展历程等等。这段文字应该能够让用户更好地了解你的应用和服务。
        </text>
      </view>
    </view>

    <!-- 联系方式 -->
    <view class="section">
      <view class="section-title">联系我们</view>
      <view class="contact-item" @tap="callPhone('你的电话号码')">
        <text class="label">电话:</text>
        <text class="value">你的电话号码</text>
      </view>
      <view class="contact-item" @tap="sendEmail('你的邮箱地址')">
        <text class="label">邮箱:</text>
        <text class="value">你的邮箱地址</text>
      </view>
      <!-- 可选：公司地址 -->
      <!--
      <view class="contact-item">
        <text class="label">地址:</text>
        <text class="value">你的公司地址</text>
      </view>
      -->
    </view>

    <!-- 版本信息及协议 -->
    <view class="section">
      <view class="section-title">其他信息</view>
      <view class="info-item">
        <text class="label">当前版本:</text>
        <text class="value">{{ appVersion }}</text>
      </view>
      <view class="info-item" @tap="goToPage('/pages/about/privacy-policy')">
        <text class="label">隐私政策</text>
        <text class="arrow">></text>
      </view>
      <view class="info-item" @tap="goToPage('/pages/about/user-agreement')">
        <text class="label">用户协议</text>
        <text class="arrow">></text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const appVersion = ref('');

// 拨打电话
const callPhone = (phoneNumber) => {
  uni.makePhoneCall({
    phoneNumber: phoneNumber
  });
};

// 发送邮件
const sendEmail = (email) => {
  uni.openEmail({
    email: email
  });
};

// 跳转页面（隐私政策、用户协议等）
const goToPage = (url) => {
  uni.navigateTo({
    url: url
  });
};
</script>

<style lang="scss" scoped>
.about-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 32rpx;
}

.section {
  background: #fff;
  margin: 24rpx;
  padding: 32rpx;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .section-title {
    font-size: 32rpx;
    color: #333;
    font-weight: 600;
    margin-bottom: 24rpx;
    width: 100%;
    text-align: left;
  }

  .logo {
    width: 160rpx;
    height: 160rpx;
    margin-bottom: 24rpx;
  }

  .app-name {
    font-size: 40rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 12rpx;
  }

  .slogan {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 32rpx;
  }

  .description {
    font-size: 28rpx;
    color: #555;
    line-height: 1.6;
    text-align: justify;
  }

  .contact-item, .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .label {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }

    .value {
      font-size: 28rpx;
      color: #666;
    }

    .arrow {
       font-size: 28rpx;
      color: #999;
    }
  }
}
</style> 